<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 商品列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>


        <div class="container">


                <el-form :inline="true" :model="form1" v-if="hasPermission('goods:select')">
                    <el-form-item label="商品名">
                        <el-input placeholder="商品名"></el-input>
                    </el-form-item>
                    <el-form-item label="商品类别">
                        <el-select v-model="form1.goodsTypeName">
                            <el-option v-for="goodsType in goodsTypes" :key="goodsType.goodsTypeId"
                                       :value="goodsType.goodsTypeName" :label="goodsType.goodsTypeName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上架状态">
                        <el-select v-model="form1.isDeleted">
                            <el-option label="已上架" :value="0"></el-option>
                            <el-option label="未上架" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" @click="searchGoods">搜索</el-button>
                    </el-form-item>
                </el-form>

            <el-table
                    :data="goodsList"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    v-if="hasPermission('goods:select')"
            >
                <el-table-column label="ID" width="55" align="center">
                    <template slot-scope="scope">
                        {{scope.row.goodsId}}
                    </template>
                </el-table-column>
                <el-table-column label="商品图片">
                    <template slot-scope="scope">
                        <el-image :src="`http://localhost/${scope.row.goodsPicture}`" style="width: 60px;height: 80px"/>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称">
                    <template slot-scope="scope">
                        <span>{{scope.row.goodsName}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="商品类别">
                    <template slot-scope="scope">
                        <span>{{scope.row.goodsTypeName}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="商品价格">
                    <template slot-scope="scope">
                        <span>{{scope.row.goodsPrice}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="标签">
                    <template slot-scope="scope">
                        上架：
                        <el-switch
                                v-model="scope.row.isDeleted"
                                active-value="1"
                                inactive-value="0"
                                @change="goodsChange(scope.row.goodsId,scope.row.isDeleted)"
                                v-if="hasPermission('goods:update')"
                        >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="商品库存">
                    <template slot-scope="scope">
                        {{scope.row.goodsStock}}
                    </template>
                </el-table-column>
                <el-table-column label="商品销量">
                    <template slot-scope="scope">
                        {{scope.row.goodsSales}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                class="red"
                                @click="edit(scope.row.goodsId)"
                                v-if="hasPermission('goods:update')"
                        >编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="pageNum"
                        :page-size="8"
                        :total="total"
                        @current-change="handlePageChange"
                        v-if="hasPermission('goods:select')"
                ></el-pagination>
            </div>
            <el-dialog title="编辑商品" :visible.sync="editVisible" width="45%" label-position="left" label-width="150px"
                       size="small" v-if="hasPermission('goods:update')">
                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                    <el-form-item label="商品图片">
                        <el-button type="primary" @click="clickFile">上传商品图片</el-button>
                        <input type="file" style="display: none" ref="file" id="file"/>
                    </el-form-item>

                    <el-form-item label="商品名称" prop="goodsName">
                        <el-input v-model="form.goodsName"></el-input>
                    </el-form-item>
                    <el-form-item label="商品类别" prop="goodsTypeName">
                        <el-select v-model="form.goodsTypeName">
                            <el-option v-for="(goodsType,index) in goodsTypes" :key="index"
                                       :label="goodsType.goodsTypeName" :value="index" v-if="goodsType.isDeleted===0">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="goodsPrice">
                        <el-input-number v-model="form.goodsPrice"/>
                    </el-form-item>
                    <el-form-item label="商品库存" prop="goodsStock">
                        <el-input-number v-model="form.goodsStock"/>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit()" v-if="hasPermission('goods:update')">修改商品</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import { hasMenu, hasPermission, permissionListContain } from '../../utils/authority';
    import { doGoods, getGoods, listGoodsType, updateGoods } from '../../api/goods';
    import { doUpload } from '../../api/upload';

    export default {
        name: 'Goods',

        created() {
            this.fetchData(1);
        },
        data() {
            return {
                goodsList: [],
                total: 0,
                pageNum: 1,
                goodsName: null,
                isDeleted: null,
                goodsTypeName: null,
                goodsTypes: [],
                editVisible: false,
                rules: {
                    goodsName: [{ required: true, message: '商品名不得为空', trigger: 'blur' }],
                    goodsStock: [{ required: true, message: '商品库存不得为空', trigger: 'blur' }],
                    goodsTypeName: [{ required: true, message: '商品类别不得为空', trigger: 'blur' }],
                    goodsPrice: [{ required: true, message: '商品价格不得为空', trigger: 'blur' }]
                },

                form1: {
                    goodsName: '',
                    isDeleted: null,
                    goodsTypeName: ''
                },
                form: {
                    goodsName: '',
                    goodsStock: 0,
                    goodsTypeName: '',
                    goodsPrice: 0,
                    isDeleted: 1,
                    goodsPicture: null,
                    goodsTypeId: null
                }


            };
        },
        methods: {
            handlePageChange(pageNum) {
                this.fetchData(pageNum);
            },
            permissionContain(permissionList) {
                return permissionListContain(permissionList);
            },
            hasPermission(permission) {
                return hasPermission(permission);
            },
            hasMenu(menuCode) {
                return hasMenu(menuCode);
            },
            goodsChange(goodsId, isDeleted) {
                doGoods({
                    goodsId: goodsId,
                    isDeleted: isDeleted
                });
            },

            searchGoods(){
              getGoods(this.form1).then(res=>{
                this.goodsList=res.data.data.list;
              });
            },
            edit(goodsId) {
                this.editVisible = true;
                this.getGoods(goodsId);
            },
            clickFile() {
                document.querySelector('#file').click();

            },
            getGoods(goodsId) {
                getGoods({
                    goodsId: goodsId
                }).then(res => {
                    this.form = res.data.data.list[0];
                    this.goodsTypeName = this.form.goodsTypeName;

                });
            },

            async upload() {
                console.log(this.$refs.file.files[0]);
                if (this.$refs.file.files[0] !== undefined) {
                    let param = new FormData();
                    param.append('file', this.$refs.file.files[0]);
                    await doUpload(param).then(res => {
                        this.form.goodsPicture = res.data.data;
                    });
                }

            },
            async onSubmit() {

                await this.upload();
                if (this.goodsTypeName !== this.form.goodsTypeName) {
                    let index = this.form.goodsTypeName;
                    this.form.goodsTypeName = this.goodsTypes[index].goodsTypeName;
                    this.form.goodsTypeId = this.goodsTypes[index].goodsTypeId;
                }


                await updateGoods(JSON.stringify(this.form)).then(res => {
                    if (res.data.resultCode === 201) {
                        this.$message.success('修改成功');
                        this.form = {
                            goodsName: '',
                            goodsStock: 0,
                            goodsTypeName: '',
                            goodsPrice: 0,
                            isDeleted: 1,
                            image: '',
                            goodsTypeId: null
                        };
                        this.editVisible = false;
                        this.fetchData(1);
                    } else {
                        this.$message.error('修改失败');
                    }
                });
            },
            fetchData(pageNum) {

                listGoodsType().then(res => {
                    this.goodsTypes = res.data.data;
                });
                getGoods({
                    goodsName: this.goodsName,
                    goodsTypeName: this.goodsTypeName,
                    isDeleted: this.isDeleted,
                    pageNum: pageNum,
                    pageSize: 8
                }).then(res => {
                    this.total = res.data.data.total;
                    this.pageNum = pageNum;
                    this.goodsList = res.data.data.list;
                    this.goodsList.forEach(goods => goods.isDeleted = goods.isDeleted + '');
                    this.goodsName = null;
                    this.goodsTypeName = null;
                    this.isDeleted = null;
                });
            }
        }
    };
</script>

<style scoped>

</style>
